<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>塔机监控系统</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/script.js" defer></script>
</head>
<body>
    <h1>塔机监测</h1>
	<h2>参数上报</h2>
    <div class="container">
        <div class="data-display">
            <div class="data-item">
                <label for="SIM">SIM 卡号</label>
                <span id="SIM">--</span>
            </div>
            <div class="data-item">
                <label for="groupID">群塔 ID</label>
                <span id="groupID">--</span>
            </div>
            <div class="data-item">
                <label for="towerID">塔机在群塔中 ID</label>
                <span id="towerID">--</span>
            </div>
            <div class="data-item">
                <label for="landyard">吊绳倍率</label>
                <span id="landyard">--</span>
            </div>
            <div class="data-item">
                <label for="posX">塔机X 坐标</label>
                <span id="posX">--</span>
            </div>
            <div class="data-item">
                <label for="posY">塔机Y 坐标</label>
                <span id="posY">--</span>
            </div>
        </div>
        <div class="data-display">
            <div class="data-item">
                <label for="forarmlen">塔机前臂长度</label>
                <span id="forarmlen">--</span>
            </div>
            <div class="data-item">
                <label for="rearmlen">塔机后臂长度</label>
                <span id="rearmlen">--</span>
            </div>
            <div class="data-item">
                <label for="towerhathight">塔帽高度</label>
                <span id="towerhathight">--</span>
            </div>
            <div class="data-item">
                <label for="towerhight">塔身高度</label>
                <span id="towerhight">--</span>
            </div>
            <div class="data-item">
                <label for="inslongti">安装经度</label>
                <span id="inslongti">--</span>
            </div>
            <div class="data-item">
                <label for="inslati">安装纬度</label>
                <span id="inslati">--</span>
            </div>
        </div>
        <div class="data-display">
            <div class="data-item">
                <label for="leftmax">左转最大角度</label>
                <span id="leftmax">--</span>
            </div>
            <div class="data-item">
                <label for="rightmax">右转最大角度</label>
                <span id="rightmax">--</span>
            </div>
            <div class="data-item">
                <label for="cargototowerformax">最大物载</label>
                <span id="cargototowerformax">--</span>
            </div>
            <div class="data-item">
                <label for="carcyctotowermin">最小物载</label>
                <span id="carcyctotowermin">--</span>
            </div>
            <div class="data-item">
                <label for="hookmaxhight">吊钩最大高度</label>
                <span id="hookmaxhight">--</span>
            </div>
            <div class="data-item">
                <label for="maxload">最大负载</label>
                <span id="maxload">--</span>
            </div>
        </div>
        <div class="data-display">
            <div class="data-item">
                <label for="torquemax">最大扭矩</label>
                <span id="torquemax">--</span>
            </div>
            <div class="data-item">
                <label for="warning">预警百分比</label>
                <span id="warning">--</span>
            </div>
            <div class="data-item">
                <label for="alert">报警百分比</label>
                <span id="alert">--</span>
            </div>
            <div class="data-item">
                <label for="illegal">违章百分比</label>
                <span id="illegal">--</span>
            </div>
        </div>
    </div>
	<h2>实时数据</h2>
	<div class="container">
	    <div class="data-display">
	        <div class="data-item">
	            <label for="uploadtime_real">上传时间戳</label>
	            <span id="uploadtime_real">--</span>
	        </div>
	        <div class="data-item">
	            <label for="hight">高度</label>
	            <span id="hight">--</span>
	        </div>
	        <div class="data-item">
	            <label for="amplitude">幅度</label>
	            <span id="amplitude">--</span>
	        </div>
	        <div class="data-item">
	            <label for="angle">转角</label>
	            <span id="angle">--</span>
	        </div>
	        <div class="data-item">
	            <label for="load">载重</label>
	            <span id="load">--</span>
	        </div>
	        <div class="data-item">
	            <label for="safeload">安全载重</label>
	            <span id="safeload">--</span>
	        </div>
	    </div>
	    <div class="data-display">
	        <div class="data-item">
	            <label for="safeloadpercentage">安全载重百分比</label>
	            <span id="safeloadpercentage">--</span>
	        </div>
	        <div class="data-item">
	            <label for="torque">力矩</label>
	            <span id="torque">--</span>
	        </div>
	        <div class="data-item">
	            <label for="torqueloadpercentage">力矩载重百分比</label>
	            <span id="torqueloadpercentage">--</span>
	        </div>
	        <div class="data-item">
	            <label for="windspeed">当前风速</label>
	            <span id="windspeed">--</span>
	        </div>
	        <div class="data-item">
	            <label for="inclinationX">倾斜角度X</label>
	            <span id="inclinationX">--</span>
	        </div>
	        <div class="data-item">
	            <label for="inclinationY">倾斜角度Y</label>
	            <span id="inclinationY">--</span>
	        </div>
	    </div>
	    <div class="data-display">
	        <div class="data-item">
	            <label for="devStatus">设备状态</label>
	            <span id="devStatus">--</span>
	        </div>
	        <div class="data-item">
	            <label for="deepth">深度</label>
	            <span id="deepth">--</span>
	        </div>
		</div>
	</div>
	<h2>吊装数据</h2>
	<div class="container">
	    <div class="data-display">
	        <div class="data-item">
	            <label for="uploadtime_hoi">上传时间</label>
	            <span id="uploadtime_hoi">--</span>
	        </div>
	        <div class="data-item">
	            <label for="begintime">吊装开始时间</label>
	            <span id="begintime">--</span>
	        </div>
	        <div class="data-item">
	            <label for="endtime">吊装结束时间</label>
	            <span id="endtime">--</span>
	        </div>
	        <div class="data-item">
	            <label for="maxload">最大载重</label>
	            <span id="maxload">--</span>
	        </div>
	        <div class="data-item">
	            <label for="maxLoadPercentage">最大载重百分比</label>
	            <span id="maxLoadPercentage">--</span>
	        </div>
	        <div class="data-item">
	            <label for="maxtorque">最大力矩</label>
	            <span id="maxtorque">--</span>
	        </div>
	    </div>
	    <div class="data-display">
	        <div class="data-item">
	            <label for="maxtorquepercentage">最大力矩百分比</label>
	            <span id="maxtorquepercentage">--</span>
	        </div>
	        <div class="data-item">
	            <label for="beginangle">开始转角</label>
	            <span id="beginangle">--</span>
	        </div>
	        <div class="data-item">
	            <label for="endangle">结束转角</label>
	            <span id="endangle">--</span>
	        </div>
	        <div class="data-item">
	            <label for="beginamplitude">开始幅度</label>
	            <span id="beginamplitude">--</span>
	        </div>
	        <div class="data-item">
	            <label for="endamplitude">结束幅度</label>
	            <span id="endamplitude">--</span>
	        </div>
	        <div class="data-item">
	            <label for="maxamplitude">最大工作幅度</label>
	            <span id="maxamplitude">--</span>
	        </div>
	    </div>
	    <div class="data-display">
	        <div class="data-item">
	            <label for="minamplitude">最小工作幅度</label>
	            <span id="minamplitude">--</span>
	        </div>
	        <div class="data-item">
	            <label for="beginHight">开始起升高度</label>
	            <span id="beginHight">--</span>
	        </div>
	        <div class="data-item">
	            <label for="endhight">结束起升高度</label>
	            <span id="endhight">--</span>
	        </div>
	        <div class="data-item">
	            <label for="maxhight">最大起升高度</label>
	            <span id="maxhight">--</span>
	        </div>
	        <div class="data-item">
	            <label for="minhight">最小起升高度</label>
	            <span id="minhight">--</span>
	        </div>
	        <div class="data-item">
	            <label for="maxwindspeed">最大风速</label>
	            <span id="maxwindspeed">--</span>
	        </div>
	    </div>
	    <div class="data-display">
	        <div class="data-item">
	            <label for="maxinclinationX">最大倾角X</label>
	            <span id="maxinclinationX">--</span>
	        </div>
	        <div class="data-item">
	            <label for="maxinclinationY">最大倾角Y</label>
	            <span id="maxinclinationY">--</span>
	        </div>
	        <div class="data-item">
	            <label for="cranestatus">设备状态</label>
	            <span id="cranestatus">--</span>
	        </div>
	        <div class="data-item">
	            <label for="torquestatus">塔机状态</label>
	            <span id="torquestatus">--</span>
	        </div>
			<div class="data-item">
			    <label for="windspeedstatus">风速状态</label>
			    <span id="windspeedstatus">--</span>
			</div>
			<div class="data-item">
			    <label for="amplitudestatus">幅度状态</label>
			    <span id="amplitudestatus">--</span>
			</div>
	    </div>
		<div class="data-display">
		    <div class="data-item">
		        <label for="hightstatus">高度状态</label>
		        <span id="hightstatus">--</span>
		    </div>
		    <div class="data-item">
		        <label for="inclinationstatus">倾角状态</label>
		        <span id="inclinationstatus">--</span>
		    </div>
		    <div class="data-item">
		        <label for="rotationstatus">旋转状态</label>
		        <span id="rotationstatus">--</span>
		    </div>
		</div>
	</div>
</body>
</html>
